<template>
	<view class="login_box">
		<view class="text_login">
			<!-- logo -->
			<image class="login_logo"  src="../../static/logo/orange.png" alt="" />
			
			<!-- 表单区域 -->
			<view class="login_phone">
				<text>手机号</text>
				<input type="text"  maxlength="11"  v-model="phone"/>
			</view>
			<view class="login_code">
				<text>验证码</text>
				<input type="text"  maxlength="4"  v-model="code"/>
				<view hover-class="touchOpacity"  @click="getsms">{{msg}}</view>
			</view>
			
			<!-- 登录按钮 -->
			<view class="login_but" hover-class="touchOpacity" >
				<text space="ensp" @click="login">登    录</text> 
			</view>
		</view>
	</view>
</template>

<script>
import loginVue from '../login/login.vue'

	export default {
		data() {
			return {
				phone:"",
				code:"",
				msg:"获取验证码",
				isbtn:true//获取验证码按钮 是否可以点击
			}
		},
		// watch:{
		// 	phone(a){
		// 		console.log(a);
		// 	}
		// },
		methods: {
			//点击登录 http://localhost:3000/api/smslogin
			async login(){
				if(!this.phone || !this.code){
					uni.showToast({
						title:"手机号或者验证码不能为空",
						icon:"error"
					})
					return
				}
				
				
				// 获取存储的phone 和code码
				let phone = uni.getStorageSync("phone")
				let code = uni.getStorageSync("code")
				if(!phone || !code){
					uni.showToast({
						title:"验证码不正确",
						icon:"error"
					})
					return
				}
				
				
				if(this.phone!=phone || this.code!=code){
					uni.showToast({
						title:"手机号或者验证码不正确",
						icon:"error"
					})
					return
				}
				
				
				let [err,res]= await uni.request({
					url:this.$baseUrl+"/api/smslogin",
					data:{
						phone:this.phone
					},
					method:"POST"
					
				})
				if(err||res.data.code !=200){
					uni.showLoading({
						title:"登录失败",
					})
					return
				}
				console.log(res);
				res.data.list.avatarurl=this.$baseUrl+res.data.list.avatarurl
				uni.setStorageSync("userinfo",res.data.list)
				
				uni.showToast({
					title:"登录成功"
				})
				
				setTimeout(()=>{
					uni.switchTab({
						url:"/pages/index/index"
					})
				},1000)
				
				
				
			},
			
			// http://localhost:3000/api/sms 发送验证码
			async getsms(){
				
				if(!this.isbtn){
					return
				}
				
				//  获取用户输入的手机号
				
				let reg=/^1[3|5|6|7|8|9][0-9]{9}$/
				let flag=reg.test(this.phone)
				
				if(!flag){
					uni.showToast({
						title:"手机号格式不对",
						icon:"error"
					})
					return
				}
				
				// 倒计时
				this.isbtn=false
				let n = 10
				let timer = setInterval(()=>{
					n--
					this.msg=n+"s后重新发送验证码"
					if(n<1){
						clearInterval(timer)
						this.msg="重新获取验证码"
						this.isbtn=true
					}
				},1000)
				
				// 请求验证码
				let [err,res]=await uni.request({
					url:this.$baseUrl+"/api/sms",
					data:{
						phone:this.phone
					}
				})
				console.log(res);
				if(err||res.data.code !=200){
					uni.showLoading({
						title:"加载中。。。"
					})
					return
				}
				
				this.code=res.data.list.code
				
				// 保存手机号和验证码 （点击登录时）可以先在前端验证一下
				uni.setStorageSync("phone",this.phone)
				uni.setStorageSync("code",this.code)
			}
		}
}
</script>

<style>
	/* 引入样式 */
	@import url("@/static/css/textlogin.css");
</style>
